<template>
  <div class="com-show-input-border">
    <Row class="home-page-content" type="flex" align="middle">
      <BtnPlain class="com-action-btn" type="primary" @click="goBack">返回</BtnPlain>
      <h3>{{type === 'add' ? '新建' : '编辑'}}项目备案</h3>
    </Row>
    <div class="home-page-content mt-20">
      <Row justify="space-between" align="middle" v-if="type === 'edit'">
        <BtnPlain type="error">{{ formData.auditStatusName }}</BtnPlain>
        <div class="publisher">
          <span>发布人 {{ formData.publisher || '--' }}</span>
          <span>发布时间 {{ formData.publishTime || '--'}}</span>
        </div>
        <Divider />
      </Row>
      <h3 ref="scroll-top">项目基本信息</h3>
      <Form ref="formData" :model="formData" :rules="rules" @on-validate="onValidate">
        <Row :gutter="30">
          <Col span="8">
            <FormItem label="项目名称" prop="projectName">
              <Input ref="projectName" v-model="formData.projectName" placeholder="请输入项目名称"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="项目阶段" prop="projectStage">
              <Select v-model="formData.projectStage" placeholder="全部" clearable>
                <Option :value="value" v-for="(label, value) in EnumProjectPhase" :key="value">{{ label }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="30">
          <Col span="16">
            <FormItem label="项目地址" prop="projectAddressName">
              <MapSearch v-model="formData.projectAddressName" :info="formData" @getLocation="getLocation" />
            </FormItem>
          </Col>
        </Row>

        <div v-if="formData.projectStage ==='BidTender'">
          <Divider />
          <h3>招标信息</h3>
          <Row :gutter="30">
            <Col span="8">
              <FormItem label="资质要求" prop="qualifications" :rules="{required: true, message: '资质要求必填'}">
                <Input v-model="formData.qualifications" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="招标获取截止时间" prop="tenderClosingDate" :rules="{required: true, message: '招标获取截止时间必填'}">
                <DatePicker v-model="formData.tenderClosingDate" type="datetime" placeholder="请选择时间" style="width:100%"></DatePicker>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="招标截止时间" prop="deadlineForBidding" :rules="{required: true, message: '招标截止时间必填'}">
                <DatePicker
                  v-model="formData.deadlineForBidding"
                  type="datetime"
                  placeholder="请选择时间"
                  style="width:100%"
                ></DatePicker>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="资金来源" prop="fundingSource">
                <Input v-model="formData.fundingSource" placeholder="请输入资金来源"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="工程规模" prop="projectScale">
                <Input v-model="formData.projectScale" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="工期要求" prop="durationRequired">
                <Input v-model="formData.durationRequired" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="招标范围" prop="tenderScope">
                <Input v-model="formData.tenderScope" placeholder="请输入"></Input>
              </FormItem>
            </Col>

            <Col span="8">
              <FormItem
                label="招标控制价"
                prop="tenderControlPrice"
                :rules="{ pattern: /^((0{1}\.\d{1,8})|([1-9]\d*\.{1}\d{1,8})|([1-9]+\d*))$/, message: '请输入数字', trigger: 'change' }"
              >
                <Input v-model="formData.tenderControlPrice" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem
                label="保证金金额"
                prop="bond"
                :rules="{ pattern: /^((0{1}\.\d{1,8})|([1-9]\d*\.{1}\d{1,8})|([1-9]+\d*))$/, message: '请输入数字', trigger: 'change' }"
              >
                <Input v-model="formData.bond" placeholder="请输入"></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="缴纳保证金截止时间" prop="bondEndTime">
                <DatePicker v-model="formData.bondEndTime" type="datetime" placeholder="请选择时间" style="width:100%"></DatePicker>
              </FormItem>
            </Col>
          </Row>
        </div>

        <Divider />
        <h3 class="mb-10">指定经营人员</h3>
        <StaffOperate ref="staffOperate" :busiInfoId="formData.busiInfoId" :initData="formData.busiIndustryAssignList" />

        <Divider />
        <h3>项目方</h3>
        <Row :gutter="30">
          <Col span="8">
            <FormItem label="业主方公司名称" prop="ownerCompanyName">
              <Input v-model="formData.ownerCompanyName" placeholder="请输入业主方公司名称"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="施工方公司名称" prop="constructionName">
              <Input v-model="formData.constructionName" placeholder="请输入施工方公司名称"></Input>
            </FormItem>
          </Col>
        </Row>

        <Row :gutter="30">
          <Col span="16">
            <FormItem label="预计产值规模(万元)" prop="outputScale">
              <Input v-model="formData.outputScale" placeholder="请输入预计产值规模(万元)"></Input>
            </FormItem>
          </Col>
          <Col span="16">
            <FormItem label="项目备注" prop="projectRemark">
              <Input type="textarea" :rows="4" v-model="formData.projectRemark" placeholder="请输入项目备注"></Input>
            </FormItem>
          </Col>
        </Row>
        <Button type="primary" @click="onConfirm">提交</Button>
      </Form>
    </div>
  </div>
</template>

<script>
import StaffOperate from './common/staffOperate.vue'
import MapSearch from '@/pages/components/mapSearch'
import { projectFilingAddPage, projectFilingUpdateData, projectFilingGetData } from '@/api/projectFiling.js'
import { throttle, debounce } from 'lodash';

export default {
  name: 'projectFilingAdd',
  components: { MapSearch, StaffOperate },
  data () {
    return {
      type: 'add',
      industryAssignsList: [],
      formData: {
        busiInfoId: '',
        projectName: '',
        infoType: 'BigData',
        projectStage: '',
        province: '',
        city: '',
        projectAddressName: '',
        longitude: '',
        latitude: '',
        ownerCompanyName: '',
        constructionName: '',
        outputScale: '',
        projectRemark: '',
        // 产业标记
        busiIndustryAssignList: [],
        auditStatusName: '未审核',
        // 产业链关联id
        parentId: '',

        fundingSource: '',
        tenderClosingDate: '',
        deadlineForBidding: '',
        projectScale: '',
        durationRequired: '',
        tenderScope: '',
        qualifications: '',
        tenderControlPrice: '',
        bond: '',
        bondEndTime: '',
      },
      provinceList: [],
      cityList: [],
      rules: {
        projectName: { required: true, message: '项目名称必填' },
        infoType: [
          { required: true, message: '信息类型必填', trigger: 'change' }
        ],
        projectAddressName: { required: true, message: '项目地址必填' },
        projectStage: [
          { required: true, message: '项目阶段必填', trigger: 'change' }
        ],
        ownerCompanyName: { required: true, message: '业主方公司名称必填' },
        outputScale: [
          { required: true, message: '预计产值规模(万元)必填' },
          // 匹配数字, 包含最多8位小数
          { pattern: /^((0{1}\.\d{1,8})|([1-9]\d*\.{1}\d{1,8})|([1-9]+\d*))$/, message: '请输入数字', trigger: 'change' },
        ]
      },
      EnumBusinessTypeStatus: {
        ProfessionRelevance: '产业链关联',
        AllUserBusiness: '全民经营',
        ExternalStatement: '项目备案',
      },
      EnumProjectPhase: {
        ProjectApproval: '立项阶段',
        Prepare: '准备阶段',
        BidTender: '招标阶段',
        StartWork: '开工阶段',
      },
      isSub: false // 判断是否为提交
    }
  },
  async created () {
    this.type = this.$route.query.type || 'add'
    if (this.type === 'add') return
    this.init()
  },

  methods: {
    async init () {
      const busiInfoId = this.$route.query.busiInfoId || ''
      this.formData = await projectFilingGetData({ busiInfoId })
    },
    goBack () {
      this.$router.replace({ path: '/projectFiling' })
    },
    getLocation ({ lat, lng, province, city }) {
      this.formData.longitude = lng
      this.formData.latitude = lat
      this.formData.province = province
      this.formData.city = city
    },
    onValidate (prop, status, error) {
      if (!['ownerCompanyName', 'outputScale'].includes(prop) && !status && this.isSub) {
        this.onScroll('scroll-top')
      }
    },
    onScroll: debounce(function (name) {
      this.$refs[name].scrollIntoView(false)
    }, 100),
    onConfirm: throttle(function () {
      this.isSub = true
      this.$refs['formData'].validate(async (valid) => {
        this.isSub = false

        if (!valid) {
          this.$Message.error('数据填写不完整!');
          return
        }

        let request = {
          ...this.formData,
          busiIndustryAssignList: this.$refs.staffOperate.getData()
        }

        if (request.projectStage !== 'BidTender') {
          request = {
            ...request,
            ...{
              fundingSource: '',
              tenderClosingDate: '',
              deadlineForBidding: '',
              projectScale: '',
              durationRequired: '',
              tenderScope: '',
              qualifications: '',
              tenderControlPrice: '',
              bond: '',
              bondEndTime: '',
            }
          }
        }

        if (this.type === 'add') {
          await projectFilingAddPage(request)
        } else {
          await projectFilingUpdateData(request)
        }
        this.$Message.success('操作成功！');
        this.goBack()
      })
    }, 500)
  }
}
</script>

<style lang='less' scoped>
.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.publisher {
  > span {
    margin-left: 20px;
  }
}

.industry-linkage-tips {
  color: #7b8591;
  margin-bottom: 10px;
}

.project-list {
  min-height: 200px;
  max-height: 400px;
  margin-top: 10px;
  overflow: scroll;
  li {
    padding: 10px 20px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: #f1f8ff;
    border-radius: 10px;
    &.on {
      background-color: #c7e0f9;
    }

    .icon-round {
      width: 20px;
      height: 20px;
      margin-right: 2px;
      border-radius: 50%;
      background-color: #fff;
    }
  }

  .no-data-text {
    line-height: 40px;
    text-align: center;
  }
}
</style>
